import React, { Component,useCallback } from 'react'
import './Demo.css'

export default class Demo extends Component {
    state = {plantList:[],heartList:[],i:null}
    
    componentDidMount(){
        fetch('https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants')
            .then(res=>res.json())
            .then(res=>{
                this.setState({plantList: res.result.plantList})
                    this.state.plantList.map(item=>{
                        item.sta=false;                //添加布尔属性
                        item.collect='收藏';            //添加收藏按钮文字属性
                        if(item.area == ''){
                            return item.area = '未知产地';
                        }
                    })
            })
    }

    //点击按钮函数：改变收藏、属性
    heart = (i) =>{                     
        let v = this.state.plantList[i].sta;
        if(v == false){
            this.state.plantList[i].collect = '已收藏';
            v = true ;
        }else{
            this.state.plantList[i].collect = '收藏';
            v = false ;
        }
        this.state.plantList[i].sta = v;
        let newList = this.state.plantList.filter((item,index)=>item.sta == true);
        this.setState({heartList:newList})
    }

    //点击收藏列表按钮取消收藏
    notHeart=(id)=>{
        let plant_indexflo = this.state.plantList.filter((item,index)=>item.plantID==id);
        let v = plant_indexflo.sta;
        if(v == false){
            plant_indexflo[0].collect = '已收藏';
            v = true ;
        }else{
            plant_indexflo[0].collect = '收藏';
            v = false ;
        }
        plant_indexflo[0].sta = v;
        let newList = this.state.plantList.filter((item,index)=>item.sta == true);
        this.setState({heartList:newList})
    }

  
    render() {
        let {plantList,heartList} = this.state;

      return (
        <div>
            <div>
                <h2>收藏列表</h2>
                <ul id="heart">
                    {
                        heartList.map((item,index)=>{
                            return <li key={item.id}>
                                <span>{item.name}</span>
                                <button onClick={()=>this.notHeart(item.plantID)}>取消收藏</button>
                                <br/>
                                </li>
                        })
                    }
                </ul>
            </div>
            <div>
                <h2>鲜花列表</h2>
                <ul id="flower">
                    {
                        plantList.map((item,index)=>{
                            return <li key={item.id} class="flowerLi">
                               <img src={item.coverURL}/>
                               <span>{item.name}</span>
                               <br/>
                               <span>{item.engName}</span>
                               <br/>
                               <span>产地：{item.area}</span>
                               <br/>
                               <button onClick={()=>this.heart(index)}>{item.collect || '收藏'}</button>

                            </li>
                        })
                    }
                </ul>
            </div>
          
        </div>
      )
    }
  }
  